<template>
	<view class="wrap">
		<!--整页占一行-->
		<u-row gutter="16" justify="center" class="search-box">
			<u-col span="11" class="demo-layout">
				<!--搜索框里放两行-->
				<u-row gutter="16" justify="around" class="date-box">
					<!--第一行放日期-->

					<!--放三列 ，左右是开始时间和结束时间，中间是横线-->
					<u-col span="4" align="center" @click="calenderShow">
						<span>出租</span>
						<br />
						{{ startDate }}
					</u-col>
					<u-col span="2" align="center">租{{ interval }}天</u-col>
					<u-col span="4" align="center" @click="calenderShow">
						<span>归还</span>
						<br />
						{{ endDate }}
					</u-col>
				</u-row>
				<!--第二行放搜索按钮-->
				<u-button type="warning" shape="circle" class="seach-btn" @click="search">搜索</u-button>
			</u-col>
		</u-row>
		<u-row>
			<view class="u-demo-area">
				<u-calendar
					v-model="show"
					ref="calendar"
					@change="change"
					:mode="mode"
					:start-text="startText"
					:end-text="endText"
					:range-color="rangeColor"
					:range-bg-color="rangeBgColor"
					:active-bg-color="activeBgColor"
					:btn-type="btnType"
					max-date="2099-01-01"
					:min-date="today"
				></u-calendar>
			</view>
		</u-row>
	</view>
</template>

<script>
export default {
	data() {
		return {
			show: false,
			mode: 'range',
			result: '请选择日期',
			startText: '出租',
			endText: '归还',
			rangeColor: '#3590eb',
			rangeBgColor: 'rgba(89,219,255,0.13)',
			activeBgColor: '#3590eb',
			btnType: 'primary',
			startDate: '请选择>>',
			endDate: '请选择>>',
			interval: 0,
			today: ''
		};
	},
	onLoad() {
		let myDate = new Date();
		let today = myDate
			.toLocaleDateString()
			.split('/')
			.join('-');
		this.today = today;
	},
	methods: {
		calenderShow() {
			this.show = true;
		},
		change(e) {
			this.startDate = e.startDate;
			this.endDate = e.endDate;
			// 计算出天数
			let interval = new Date(e.endDate) - new Date(e.startDate);
			this.interval = Math.floor(interval / (24 * 3600 * 1000));
		},
		search() {
			let defaultWord = '请选择>>';
			if (this.startDate !== defaultWord && this.startDate !== '' && this.endDate !== defaultWord && this.endDate !== '') {
				// 跳转到车辆列表页
				this.$u.route({
					url: 'pages/rentalCars/carList/index',
					params: { startDate: this.startDate, endDate: this.endDate, interval: this.interval }
				});
			} else {
				this.$u.toast('请选择租赁时间');
			}
		}
	}
};
</script>

<style scoped lang="scss">
.wrap {
	font-size: 28rpx;
	color: #f2f2f2;
	.search-box {
		margin-top: 250rpx;
		.demo-layout {
			border-radius: 12rpx;
			background-color: #3590eb;

			.date-box {
				margin: 50rpx 0;

				border-radius: 12rpx;
			}

			.seach-btn {
				margin: 20rpx 10rpx;
			}
		}
	}
}

.u-row {
	margin: 10rpx 0;
}

</style>
